<template>
  <div :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
import * as echarts from 'echarts'
// require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

import chinaJson from '../json/china';

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    ydata: {
      type: Array,
      default: () => ['宝马', '奔驰', '劳斯莱斯', '马自达', '比亚迪', '丰田', '雪佛兰', '保时捷', '别克', '福特', '法拉利', '特斯拉', '大众', '路虎', '日产', '雷克萨斯', '沃尔沃', '斯巴鲁']
    },
    legend: {
      type: Array,
      default: () => ['入库数量', '出库数量', '在库数量']
    },
    barData: {
      type: Array,
      default: () => [
        { name: '入库数量', data: [500, 600, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000], startColor: 'rgba(250, 206, 125, 0.5)', endColor: 'rgba(250, 206, 125, 1)' },
        { name: '出库数量', data: [300, 400, 500, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000], startColor: 'rgba(156, 192, 233, 0.5)', endColor: 'rgba(156, 192, 233, 1)' },
        { name: '在库数量', data: [800, 500, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000, 1050, 1100], startColor: 'rgba(106, 188, 195, 0.5)', endColor: 'rgba(106, 187, 195, 1)' },
      ]
    },
  },
  data() {
    return {
      chart: null,
      interval: null,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null

    if (this.interval) {
      clearInterval(this.interval);
      this.interval = null;
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      const point_circle = [
        {
          value: [114.124866,22.568761],
          label: {
            name: '深圳市'
          },
          itemStyle: {
            color: 'red',
          },
        },
        {
          value: [111.40428944964492,23.214980250366754],
          label: {
            name: '广本日捆'
          },
        },
        {
          value: [111.8516311981125,24.034669691006453],
          label: {
            name: '广丰好来运'
          },
        },
        {
          value: [112.96998545184499,24.889748859346106],
          label: {
            name: '日产德之顺'
          },
        },
        {
          value: [116.86185767918391,23.42038253166278],
          label: {
            name: '埃安南华'
          },
        },
        {
          value: [110.19646674159424, 21.893009061266223],
          label: {
            name: '小鹏宝供'
          },
        },
        {
          value: [115.92708024907824, 30.953074915309823],
          label: {
            name: '神龙汉华'
          },
        },
        {
          value: [109.57180523710633, 32.098998682088826],
          label: {
            name: '本田日邮'
          },
        },
        {
          value: [113.6987542304172,34.68531462133426],
          label: {
            name: '日产润宇'
          },
        },
        {
          value: [108.60791748902386, 30.09150629696311],
          label: {
            name: '小鹏中都'
          },
        },
        {
          value: [113.0053812408255, 28.138134368077967],
          label: {
            name: '埃安广捷'
          },
        },
        {
          value: [117.62345725081741, 32.50561485242596],
          label: {
            name: '蔚来江汽'
          },
        },
        {
          value: [119.98220851477572, 31.801935570287675],
          label: {
            name: '理想盛邦'
          },
        },
        {
          value: [116.4166258430837, 39.900698228164316],
          label: {
            name: '现代盛邦'
          },
        },
      ];

      // 流向线条的经纬度，可自定义样式
      const point_line = [
        {
          coords: [
            [114.124866,22.568761],   // 初始点经纬度
            [111.40428944964492,23.214980250366754],    //目标点经纬度
          ],
          label: {
            start: '深圳市',
            end: '广本日捆'
          }
        },
        {
          coords: [
            [114.124866,22.568761],
            [111.8516311981125,24.034669691006453],
          ],
          label: {
            start: '深圳市',
            end: '广丰好来运'
          }
        },
        {
          coords: [
            [114.124866,22.568761],
            [112.96998545184499,24.889748859346106],
          ],

          label: {
            start: '深圳市',
            end: '日产德之顺'
          }
        },
        {
          coords: [
            [114.124866,22.568761],
            [110.19646674159424, 21.893009061266223],
          ],

          label: {
            start: '深圳市',
            end: '小鹏宝供'
          }
        },
        {
          coords: [
            [114.124866,22.568761],
            [116.86185767918391,23.42038253166278],
          ],

          label: {
            start: '深圳市',
            end: '埃安南华'
          }
        },
        {
          coords: [
            [114.124866,22.568761],
            [113.6987542304172,34.68531462133426],
          ],

          label: {
            start: '深圳市',
            end: '日产润宇'
          }
        },
        {
          coords: [
            [114.124866,22.568761],
            [113.0053812408255, 28.138134368077967],
          ],

          label: {
            start: '深圳市',
            end: '埃安广捷'
          }
        },
        {
          coords: [
            [114.124866,22.568761],
            [115.92708024907824, 30.953074915309823],
          ],

          label: {
            start: '深圳市',
            end: '神龙汉华'
          }
        },
        {
          coords: [
            [114.124866,22.568761],
            [109.57180523710633, 32.098998682088826],
          ],

          label: {
            start: '深圳市',
            end: '本田日邮'
          }
        },
        {
          coords: [
            [114.124866,22.568761],
            [108.60791748902386, 30.09150629696311],
          ],

          label: {
            start: '深圳市',
            end: '小鹏中都'
          }
        },
        {
          coords: [
            [114.124866,22.568761],
            [117.62345725081741, 32.50561485242596],
          ],

          label: {
            start: '深圳市',
            end: '蔚来江汽 '
          }
        },
        {
          coords: [
            [114.124866,22.568761],
            [119.98220851477572, 31.801935570287675],
          ],

          label: {
            start: '深圳市',
            end: '理想盛邦'
          }
        },
        {
          coords: [
            [114.124866,22.568761],
            [116.4166258430837, 39.900698228164316],
          ],

          label: {
            start: '深圳市',
            end: '现代盛邦'
          }
        },
      ];
      echarts.registerMap('china', chinaJson);

      this.chart.setOption({
        backgroundColor: "transparent",
        tooltip: {
          //格式化内容，返回为空，地图组件不起作用，得在地图组件重新定义
          formatter: () => '',
          textStyle: {
            color: '#fff'
          }
        },
        geo: [
          {
            map: 'china',
            zlevel: 1,
            zoom: 2.2,
            roam: false,
            layoutCenter: ['25%', '28%'],
            // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
            layoutSize: '100%',
            itemStyle: {
              borderWidth: 1,
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(147, 235, 248, 0)', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(147, 235, 248, .2)', // 100% 处的颜色
                  },
                ],
              },
              shadowColor: 'rgba(128, 217, 248, 1)',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
              borderColor: 'rgba(147, 235, 248, 1)',
            },
            tooltip: {
              formatter: () => ''
            },
            emphasis: {   //地图高亮
              itemStyle: {
                color: '#93EBF8'
              }
            }
          },
        ],
        series: [
          {
            type: 'map',
            map: 'china',
            zlevel: 0,
            zoom: 2.2,
            roam: false,
            layoutCenter: ['25%', '28%'],
            layoutSize: '100%',
            itemStyle: {
              areaColor: 'rgba(147, 235, 248, 0)',
              borderWidth: 1,
              shadowColor: 'rgba(0, 0, 0, 1)',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 0,
              borderColor: 'rgba(0, 0, 0, 1)',
            },
            label: {
              show: true,
              color: '#fff',
            }
          },
          {
            type: 'lines',
            zlevel: 2,
            effect: {
              show: true,
              symbolSize: 5,
              color: '#E4AA0C',
              symbol: 'arrow',
            },
            lineStyle: {
              color: '#F56828',
              width: 1, //线条宽度
              curveness: 0.3,
            },
            tooltip: {
              formatter({ data }) {
                return `流向走向如下：<br />
                  起点：${data.label.start}<br />
                  终点：${data.label.end}
                  `
              },
              backgroundColor: 'rgba(245,108,45,0.5)',
            },
            data: point_line,
          },
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            rippleEffect: {
              number: 2,
              scale: 3,
              brushType: 'stroke',
            },
            itemStyle: {
              color: '#F56828',
            },
            tooltip: {
              formatter({ data }) {
                return `地点位于：${data.label.name}`
              },
              backgroundColor: 'rgba(232,85,160,0.5)',
            },
            label:{
              show:true,
              offset:[40,0],
              color:'#F56828',
              formatter({data}){
                return `${data.label.name}`
              }
            },
            data: point_circle,
          }, //地图线的动画效果,
        ],
      })
    },
  }
}
</script>
